簡介

官方文件
前端透過 HTTP 協議與伺服器通訊，進行下載、上傳資料並存取其它後端服務。
Angular 給應用提供了一個 HTTP 客戶端 API，也就是 @angular/common/http 中的 HttpClient 服務類別。

應用

官方Demo(stackblitz)
本篇文章的程式範例

匯入模組

// app.module.ts
@NgModule({
  // 官方建議 HttpClientModule 要在 BrowserModule 後方再匯入
  // 避免日後有非預期的錯誤
  imports: [
    BrowserModule,
    ...,
    HttpClientModule, 
  ]
})

取得資料

// api.service.ts
// 1. 新增一個 Service 
//    (通常會設一個 XXXService 來存放商業邏輯，官方範例的 HeroService 就放著取得 Hero 資料的 Function )
@Injectable()
export class ApiService {
  // 2. 注入 HttpClient 到此元件中
  constructor(
    private http: HttpClient
  ) { }

  // 3. 取得資料的 Function
  //    使用 HttpClient.get() 方法從伺服器獲取資料。
  //    滑鼠移到函式上面顯示 (method) ApiService.getAlbums(): Observable<Object>，
  //    該非同步方法會發送一個 HTTP 請求，並返回一個 Observable。
  getAlbums(){
    return this.http.get('https://jsonplaceholder.typicode.com/albums');
  }
}

http.get(): Observable<Object>